<template>
  <div id="page-box">
    <h3 class="damiao-title" ref="ggb">短链接生成平台</h3>
    <input-box />
    <result-box />
  </div>
</template>

<script>
import InputBox from "./components/input-box.vue";
import ResultBox from "./components/result-box.vue";
export default {
  name: "App",
  components: {
    InputBox,
    ResultBox,
  },
  mounted() {
    this.init();
  },
  methods: {
    /**
     * 模拟跑马灯效果
     */
    init() {
      let oTitle = this.$refs.ggb;
      let texts = "";
      // 定义颜色
      let fontColor = [
        {
          fontColor: "#C44032",
          shadowColor: "#5E1F18",
        },
        {
          fontColor: "#C93929",
          shadowColor: "#872E24",
        },
        {
          fontColor: "#C14234",
          shadowColor: "#832C23",
        },
        {
          fontColor: "#CD4F41",
          shadowColor: "#923228",
        },
        {
          fontColor: "#DA5D4F",
          shadowColor: "#AC3E31",
        },
        {
          fontColor: "#EA6252",
          shadowColor: "#BD4537",
        },
        {
          fontColor: "#F46655",
          shadowColor: "#BF4334",
        },
      ];

      let setColor = (fontColor) => {
        texts = "";
        Array.from(oTitle.innerText).forEach((text, index) => {
          texts += `<span style="color:${fontColor[index].fontColor};text-shasow:text-shadow: 0 0 0 ${fontColor[index].shadowColor},
           0 0 3px ${fontColor[index].shadowColor}, 0 0 6px ${fontColor[index].shadowColor}, 0 0 9px ${fontColor[index].shadowColor},
    0 0 12px ${fontColor[index].shadowColor};">${text}</span>`;
        });
        oTitle.innerHTML = texts;
      };
      setColor(fontColor);

      setInterval(() => {
        fontColor.unshift(fontColor.pop());
        setColor(fontColor);
      }, 100);
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

#page-box {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.damiao-title {
  width: 100%;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 55px;
  position: relative;
  top: 10%;
  letter-spacing: 5px;
  color: #fcd8d4;
  text-shadow: 0 0 0 #b23131, 0 0 3px #b23131, 0 0 6px #b23131, 0 0 9px #b23131,
    0 0 12px #b23131;
}
</style>
